<template>
  <div class="box">
    <van-nav-bar title="专家问诊" left-arrow @click-left="onClickLeft" />
    <!-- 搜索区块 -->
    <div class="search">
      <van-search
        v-model="value"
        show-action
        class="search-input"
        @click="router.push('/interrogationSearch')"
      >
        <template #action>
          <div @click="onClickButton">搜索</div>
        </template>
      </van-search>
    </div>
    <!-- 科室  -->
    <van-tabs v-model:active="active">
      <van-tab title="全部">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            @click="btnvanListDiv(item)"
            class="vanListDiv"
            v-for="(item, index) in list"
            :key="index"
          >
            <dl>
              <dt><img v-lazy="item.img" alt="" /></dt>
              <dd>
                <b>{{ item.name }}</b>
                <span class="vanListDivSpan">{{ item.state }}</span>
              </dd>
              <dd>
                <p>{{ item.nosocomium }} {{ item.department }}</p>
              </dd>
              <dd>
                <p class="p">
                  接诊率 <b>{{ item.good }}</b
                  >% 好评率 <b>{{ item.Ordertaking }}</b
                  >% 问诊量 <b>{{ item.interrogation }}</b
                  >%
                </p>
              </dd>
              <dd>
                <b>{{ item.price }}元&emsp;</b>平均回复:&nbsp;<b
                  >{{ item.recover }}小时内</b
                >
              </dd>
            </dl>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="皮肤科">
        <Interrogationpofu />
      </van-tab>
      <van-tab title="内科">
        <Interrogationneike />
      </van-tab>
      <van-tab title="外科">
        <Interrogationwaike />
      </van-tab>
      <van-tab title="妇产科">
        <Interrogationfu />
      </van-tab>
      <van-tab title="儿科">
        <Interrogationer />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useCounterStore } from "../pinia/index.ts"; //引入pinia
import { useRouter } from "vue-router";
import instance from "../axios/index.ts";
import Interrogationpofu from "../components/interrogation/Interrogationpofu.vue"; //皮肤科
import Interrogationer from "../components/interrogation/interrogationer.vue"; //儿科
import Interrogationfu from "../components/interrogation/interrogationfu.vue"; //妇产科
import Interrogationneike from "../components/interrogation/interrogationneike.vue"; //内科
import Interrogationwaike from "../components/interrogation/interrogationwaike.vue"; //外科
const store = useCounterStore();
const router = useRouter();
const onClickLeft = () => history.back();
interface Item {
  id: number;
  img: string;
  name: string;
  state: string;
  nosocomium: string;
  department: string;
  good: string;
  Ordertaking: string;
  interrogation: string;
  price: string;
  recover: string;
}
const active = ref(0);
const value = ref("");
const loading = ref(false);
const finished = ref(false);
let page = ref(1); //当前页
let pageSize = ref(10); //一页几条
const list = ref<Item[]>([]); //所有数据
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  page.value += 1;
  setTimeout(() => {
    // 全部
    instance.post("/api/homeall").then((res: { data: { data: any[] } }) => {
      let newarr = res.data.data.splice(page.value * pageSize.value, 10);
      list.value = [...list.value, ...newarr];
    });
    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 500) {
      finished.value = true;
    }
  }, 1000);
};
// 点击搜索
const onClickButton = () => {
  const data = value.value;
};
// 点击数据
const btnvanListDiv = (item: Item) => {
  store.data = item;
  localStorage.setItem("data", JSON.stringify(store.data));
  router.push("/consultationDetails");

  instance.post("/api/addDetails", { id: store.data.id }).then((res) => {
    // console.log(res);
    res.data.data[0].interrogation = res.data.data[0].interrogation + 1;
  });
};
</script>
<style scoped lang="scss">
.search {
  width: 100%;
  height: 0.55rem;
  border: 1px solid #fff;
  position: relative;
}

.search-input {
  width: 3.5rem;
  height: 0.35rem;
  background-color: #f4f6fa;
  margin-top: 0.1rem;
  margin-left: 0.15rem;
  border-radius: 0.5rem;
}

.notice-swipe {
  height: 30px;
  line-height: 30px;
  position: absolute;
  left: 0.7rem;
  top: 0.12rem;
}

.vanListDiv {
  width: 100%;
  height: 1.3rem;
  border-bottom: 1px solid #f4f6fa;

  dt {
    float: left;
  }

  dd {
    padding-left: 0.6rem;
    padding-top: 0.05rem;

    .vanListDivSpan {
      padding-left: 0.1rem;
    }
  }

  img {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    padding-top: 0.15rem;
  }
}

.p {
  color: #9b9898;

  b {
    color: rgb(16, 132, 220);
  }
}
</style>
